import React, { Component } from 'react'
import './App.css'
import axios from 'axios'
import star from './assets/star.png'
import banStar from './assets/ban-star.png'
import noStar from './assets/no-star.png'
export default class App extends Component {
  constructor(props){
    super(props)
    this.state={
      movies:[]
    }
  }
  render() {
    const ListItem = this.state.movies.map((item)=>{
      return <div key={item.title.toString()} className="content">
        <img className="pic" src={item.pic} alt=""/>
        <div className="title">{item.title}</div>
        <div>
          {
            item.star.map((item,index)=>{
              if(item>=1.5){
               return <img className="star" src={star} key={index} alt=""/>
             }else if(item>=1){
               return <img className="star" src={banStar} key={index} alt=""/>
             }else{
               return <img className="star" src={noStar} key={index} alt=""/>
             }       
           })
          }
          <span>{item.raiting}</span>
        </div>
      </div>
    })
    return (
      <div className="container">
        {ListItem}
      </div>
    )
  }
  transformStar(num){
    var star = []
    for(let i=0;i<5;i++){
        if(num>2){
            star.push(2)
        }else if(num>0){
            star.push(num)
        }else{
            star.num(0)
        }
        num=num-2;
    }
    return star
  }
  componentDidMount(){
    axios.get('http://localhost:8000/top250').then(res=>{
      res.data.result.forEach(item=>{
        item.star = this.transformStar(item.raiting)
      })
      this.setState({
          movies:res.data.result
        })
      })
  }
}

